<template>
  <div class="detail">
    <template v-if="!isEdit">

      <el-button class="edit" type="primary" @click="isEdit = !isEdit">编辑</el-button>
      <h2 class="title">
        {{ ruleForm.title }}
      </h2>
      <div class="content" v-html="ruleForm.content"></div>
    </template>
    <SubmitForm
        v-if="isEdit"
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @save="save"
        @close="dialogValue = false"
    />
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      isEdit: false,
      ruleForm: {
        id: 1,
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '这是一个博客标题',
        desc: '这是一段博客描述',
        content: '<p>这是一段博客内容</p>',
        status: 1
      },
      rules: {
        name: [{ required: true, message: '不能为空' }],
        image: [{ required: true, message: '不能为空' }]
      },
      formList: [
        {
          key: 'title',
          name: 'input',
          label: '标题',
          colSpan: 24
        },
        {
          key: 'image',
          name: 'file',
          multiple: false,
          defaultValue: '',
          label: '图片',
          colSpan: 24
        },
        {
          key: 'desc',
          name: 'input',
          type: 'textarea',
          label: '描述',
          colSpan: 24
        },
        {
          key: 'content',
          name: 'rich',
          label: '博客内容',
          colSpan: 24
        },
        {
          key: 'status',
          name: 'switch',
          label: '是否发布',
          activeValue: 1,
          inactiveValue: 0,
          colSpan: 24
        }
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {

    },
    save() {
      console.log('eee')
      this.$message.success('保存成功')
      this.isEdit = !this.isEdit
    }
  }
}
</script>

<style >
.detail {
  height: 100%;
  padding: 20px;
  position: relative;
  overflow: auto;
  background-color: #ffffff;
}
.edit {
  position: absolute;
  right: 30px;
  top: 30px;
}
.title {
  text-align: center;
}

</style>
